<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Simple Gantt</title>
	<style>
		body {
			font-family: sans-serif;
			background: #ccc;
		}
		.container {
			width: 80%;
			margin: 0 auto;
		}
		.gantt-container {
			overflow: scroll;
		}
		/* custom class */
		.gantt .bar-milestone .bar-progress {
			fill: tomato;
		}
	</style>
	<script src="node_modules/moment/min/moment.min.js"></script>
	<script src="node_modules/snapsvg/dist/snap.svg-min.js"></script>
	<script src="dist/frappe-gantt.js"></script>
</head>
<body>
	<div class="container">
		<h2>Interactive Gantt Chart entirely made in SVG!</h2>
		<div class="gantt-container">
			<svg id="gantt" width="400" height="600"></svg>
		</div>
	</div>
	<script>
		var names = [
			["Redesign website", [0, 7]],
			["Write new content", [1, 4]],
			["Apply new styles", [3, 6]],
			["Review", [7, 7]],
			["Deploy", [8, 9]],
			["Go Live!", [10, 10]]
		];

		var tasks = names.map(function(name, i) {
			var today = new Date();
			var start = new Date(today.getFullYear(), today.getMonth(), today.getDate());
			var end = new Date(today.getFullYear(), today.getMonth(), today.getDate());
			start.setDate(today.getDate() + name[1][0]);
			end.setDate(today.getDate() + name[1][1]);
			return {
				start: start,
				end: end,
				name: name[0],
				id: "Task " + i,
				progress: parseInt(Math.random() * 100, 10)
			}
		});
		tasks[1].progress = 0;
		tasks[1].dependencies = "Task 0"
		tasks[2].dependencies = "Task 1"
		tasks[3].dependencies = "Task 2"
		tasks[5].dependencies = "Task 4"
		tasks[5].custom_class = "bar-milestone";

		var gantt_chart = Gantt("#gantt", tasks, {
			on_click: function (task) {
				console.log(task);
			},
			on_date_change: function(task, start, end) {
				console.log(task, start, end);
			},
			on_progress_change: function(task, progress) {
				console.log(task, progress);
			},
			on_view_change: function(mode) {
				console.log(mode);
			}
		});
		console.log(gantt_chart);
	</script>
</body>
</html>